<template>
  <div class="pagination">
    <div class="total">共 {{ total }} 条记录 第{{ page }}/{{ Math.ceil(total / size) || 1 }}页</div>
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      layout="sizes, prev, pager, next, jumper"
      :page-sizes="[30, 100, 200, 300]"
      :total="total"
      background
      size="small" />
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ total: number }>(), {
  total: 0
});
const page = defineModel("page", { default: 1 });
const size = defineModel("size", { default: 30 });
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-top: 1px solid #ebeef5;
  margin-top: -1px;
  .total {
    font-size: 12px;
    color: #616a88;
    margin-right: 20px;
  }
}
</style>
